import React, { PureComponent } from "react"
import styles from "./index.less"
import { toJS } from "mobx"
import classnames from "classnames"
import cssModules from "react-css-modules"
import IconFont from "component/IconFont"
import { Row, Col, Tooltip } from "antd"

@cssModules(styles)
class Title extends PureComponent {
  render() {
    const { name } = this.props
    return (
      <div styleName={"title-item"}>
        <div className={classnames(styles["decoration-bg"])}>
          <div styleName={"angle-left-top"} />
          <div styleName={"angle-right-top"} />
          <div styleName={"angle-left-bottom"} />
          <div styleName={"angle-right-bottom"} />
          <div styleName={"bg"} />
        </div>
        <div styleName={"text-wrap"}>{name || ""}</div>
      </div>
    )
  }
}
@cssModules(styles)
class Item extends PureComponent {
  render() {
    const { data, type } = this.props
    let arr = []
    let restArr = []
    let maxIndex = 0
    toJS(data).forEach((item) => {
      let num = Number(item.spName.substring(0, 1))
      if (isNaN(num) || num === 0) {
        restArr.push(item)

        restArr.length > maxIndex && (maxIndex = restArr.length)
      } else {
        arr[num - 1] ? arr[num - 1].push(item) : (arr[num - 1] = [item])

        arr[num - 1].length > maxIndex && (maxIndex = arr[num - 1].length)
      }
    })
    restArr[0] && arr.push(restArr)

    return (
      <div>
        {arr.map((app, index) => {
          return (
            <Row
              type="flex"
              justify="start"
              key={index.toString(36) + index}
              styleName={"value-item"}
              align="bottom"
            >
              {app.map((item, i) => {
                const value =
                  item.value &&
                  (!isNaN(Number(item.value)) ? Number(item.value) : item.value)
                const result =
                  ((item.enums || {}).hasOwnProperty(item.value) &&
                    item.enums[item.value]) ||
                  value
                return (
                  <Col
                    span={
                      type === "module" ? 24 / (maxIndex > 6 ? 6 : maxIndex) : 6
                    }
                    key={i.toString(36) + i}
                  >
                    <div styleName={"item"}>
                      {item.icon && (
                        <IconFont type={item.icon} styleName={"item-icon"} />
                      )}
                      <Tooltip
                        placement="top"
                        title={
                          item.spName +
                          " : " +
                          ((result === -9999
                          ? "未接入"
                          : result)
                            ? +" " + (item.unit ? item.unit : "")
                            : "-")
                        }
                      >
                        <span styleName={"title"}>{item.spName}</span>
                        <span styleName={"point"}>:</span>
                        <span styleName={"value"}>
                          {item.value
                            ? (result === -9999 ? "未接入" : result) +
                              " " +
                              (item.unit ? item.unit : "")
                            : "-"}
                        </span>
                      </Tooltip>
                    </div>
                  </Col>
                )
              })}
            </Row>
          )
        })}
      </div>
    )
  }
}

@cssModules(styles)
class ModalContent extends PureComponent {
  render() {
    const { data, type } = this.props
    return (
      <div styleName={"container"}>
        <Item data={data} type={type} />
      </div>
    )
  }
}
export default ModalContent
